<template>
    <div class="medias">
        <div class="categorys">
            <div @click="choice_media('1')" :class="{ 'choice_bg': choice_media_id == '1', }" class="right">
                <img :src="video" alt="">
                <span>视频</span>
            </div>
            <div @click="choice_media('0')" :class="{ 'choice_bg': choice_media_id == '0', }" class="left">
                <img :src="music" alt="">
                <span>音乐</span>
            </div>

        </div>
        <div v-if="choice_media_id == '0'" class="c">
            <Music v-for="item in music_list" :key="item._id" :item="item"></Music>
        </div>
        <div v-if="choice_media_id == '1'" class="v">
            <Video v-for="item in video_list" :key="item._id" :item="item"></Video>

        </div>
    </div>
</template>
<script setup lang="ts">
import music from "@/assets/svg/home/media/music.svg"
import video from "@/assets/svg/home/media/video.svg"
import Music from "@/components/Media/Music.vue"
import Video from "@/components/Media/Video.vue"
import { format } from "@/utils/formatTime"
import { Get_music_list, Get_video_list } from "@/apis/web/WebApi"
import { ref, onMounted, watch } from "vue"
import { type WebMusic, type WebVideo } from "@/types/WebEssay"
import WebStore from "@/store/WebStore";
import { ElMessage } from "element-plus"
const store = WebStore()
const choice_media_id = ref('1')
const currentPage = ref(1)
const choice_media = (id: string) => {
    currentPage.value = 1
    choice_media_id.value = id
    isbottom.value = false
    console.log(id)
    if (id === '0') {
        getData()
    }
}
const isbottom = ref(false)
const music_list = ref<WebMusic[]>([])
const video_list = ref<WebVideo[]>([])
onMounted(() => {
    getDataVideo(currentPage.value)
})

watch(() => store.currentState, () => {

    currentPage.value++
    if (choice_media_id.value === '0') {
        getData()

    }
    if (choice_media_id.value === '1') {
        getDataVideo(currentPage.value)
    }

})
//获取音乐列表
const getData = async () => {
    if (isbottom.value) return
    const result = await Get_music_list(currentPage.value * 8 - 8)

    if (result.data.length === 0) {
        ElMessage({
            type: "info",
            message: '到底了'
        })
        isbottom.value = true
    }

    music_list.value = [...music_list.value, ...result.data]
}
//获取视频列表
const getDataVideo = async (id: number) => {
    if (isbottom.value) return
    const result = await Get_video_list(id * 6 - 6)
    if (result.data.length === 0) {
        ElMessage({
            type: "info",
            message: '到底了'
        })
        isbottom.value = true
    }
    result.data.forEach((item: WebVideo, index: number) => {
        result.data[index].publish_time = format.formatDate(item.publish_time)
        result.data[index].end_time = format.formatDate(item.end_time)
    });
    video_list.value = [...video_list.value, ...result.data]
}
</script>

<style scoped lang="scss">
.medias {
    width: 60vw;

    .categorys {
        width: 100%;
        display: flex;
        justify-content: space-evenly;

        .left,
        .right {
            width: 20%;
            margin-left: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1vw;
            font-weight: bold;

            border-radius: 30px;


            img {
                width: 20%;
            }

            span {
                margin-left: 0.5vw;
            }


        }
    }

    .choice_bg {
        background-color: orange;
    }

    .v,
    .c {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

}
</style>